import React, { Component } from 'react';
import './cate.scss'
import * as service from '../../api'
import { PictureOutline } from 'antd-mobile-icons'

class cate extends Component {
    constructor(props) {
        super(props)
        this.state = {
            arr:[],
            currentIndex:0,
            arr1:[],
        }
    }
    async componentDidMount(){
        var res = await service.pro_categorylist();
        // console.log(res);
        this.setState({ arr:res.data.data });   
        var res = await service.pro_categorybrandlist({category:res.data.data[0]});
        // console.log(res);
        this.setState({ arr1:res.data.data });   
    }
    async fenlei(item,index){
        var res = await service.pro_categorybrandlist({category:item});
        // console.log(res);
        this.setState({ arr1:res.data.data,currentIndex:index });
    }
    render() {
        return (
            <div className='fenlei'>
                <div className="top">商品分类</div>
               <div className="main">
                    <div className="mainleft">
                        {
                            this.state.arr.map((item,index)=>{
                                return (
                                     <div className={`leftlist ${this.state.currentIndex==index?'active':''}`} onClick={()=>{this.fenlei(item,index)}} key={index}>
                                    <p className={`listsmall ${this.state.currentIndex==index?'active':''}`}>{item}</p>
                                </div>
                                )
                            })
                        }
                    </div>
                    <div className="mainright">
                        {
                            this.state.arr1.map((item,index)=>{
                                return (
                                     <div className="rightlist" key={index}>
                                        <PictureOutline className='tu'/>
                                        <p>{item.brand}</p>
                                    </div>
                                )
                            })
                        } 
                       
                    </div>

               </div>
            </div>
        );
    }
}

export default cate;